<!-- demoPage -->
<template>
  <div class="demo-page" ref="demo">
    <el-form :model="queryFormData" ref="queryForm" label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="住户姓名">
            <el-input v-model="queryFormData.name" @keyup.enter.native="handleQuery" @input="debounceHandleSearch">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="所在小区">
            <el-input v-model="queryFormData.communityName" @keyup.enter.native="handleQuery"
              @input="debounceHandleSearch"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="楼幢">
            <el-input v-model="queryFormData.building" @keyup.enter.native="handleQuery" @input="debounceHandleSearch">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <mc-button ref="mcButton" :quickButtons="quickButtons" :customButtons="customButtons" @buttonsEvent="buttonsEvent">
    </mc-button>
    <mc-table ref="McTable" :labels="tableLabels" :data="tableData" :settings="tableSettings"
      @current-change="currentChange">
      <template #index>
        <el-table-column label="序号" align="center" header-align="center">
          <template slot-scope="scope">
            {{
                page["page-size"] * (page["current-page"] - 1) + scope.row.index
            }}
          </template>
        </el-table-column>
      </template>
      <template #handle>
        <el-table-column label="操作" align="center" header-align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" :disabled="!houseSelectInfo.length" @click="editHandle(scope.row)">编辑
            </el-button>
            <el-button type="text" size="small" @click="removeHandle(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </template>
    </mc-table>
    <mc-pager ref="McPager" v-if="pager" :settings="page" @current-change="getTableData" @size-change="sizeChange">
    </mc-pager>

    <el-dialog :close-on-click-modal="false" :title="dialogTitle" :visible.sync="showDialog" width="800px">
      <el-form ref="form" :model="formData" :rules="formRules" label-width="160px">
        <el-divider><i class="el-icon-mobile-phone"></i> 用户信息</el-divider>
        <div class="userInfo">
          <el-row>
            <el-col :span="12">
              <el-form-item label="住户姓名" prop="name">
                <el-input v-model="formData.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号" prop="telephone">
                <el-input v-model="formData.telephone"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="身份证号" prop="idCard">
                <el-input v-model="formData.idCard"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="年龄" prop="age">
                <el-input v-model="formData.age" type="number"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="性别" prop="sex">
                <el-select v-model="formData.sex" clearable size="small">
                  <!-- <el-option label="请选择字典生成" value="" /> -->
                  <el-option v-for="(item, indey) of [
                    { value: 1, label: '男' },
                    { value: 2, label: '女' },
                    { value: 3, label: '其它' },
                  ]" :key="indey" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="户籍" prop="hjPlace">
                <el-input v-model="formData.hjPlace"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="文化程度" prop="degree">
                <el-select v-model="formData.degree" clearable size="small">
                  <!-- <el-option label="请选择字典生成" value="" /> -->
                  <el-option v-for="(item, indey) of [
                    { value: '小学' },
                    { value: '初中' },
                    { value: '高中' },
                    { value: '大学专科' },
                    { value: '大学本科' },
                    { value: '研究生' },
                  ]" :key="indey" :label="item.value" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="人员类型" prop=" type">
                <el-select v-model="formData.type" clearable size="small">
                  <!-- <el-option label="请选择字典生成" value="" /> -->
                  <el-option v-for="(item, indey) of [
                    { value: '残疾' },
                    { value: '独居' },
                    { value: '孤寡' },
                    { value: '低保' },
                    { value: '低边' },
                    { value: '其他' },
                  ]" :key="indey" :label="item.value" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="工作单位" prop="workPlace">
                <!-- <el-input v-model="formData.isKeyManager"></el-input> -->
                <el-input v-model="formData.workPlace"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="特长" prop="speciality">
                <!-- <el-input v-model="formData.isKeyManager"></el-input> -->
                <el-input v-model="formData.speciality"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否户主" prop="HouseholdOrTenant">
                <!-- <el-input v-model="formData.isHeadHousehold"></el-input> -->
                <el-switch v-model="formData.isHeadHousehold" active-text="是" inactive-text="否" :active-value="1"
                  :inactive-value="0" @change="userInfoChange('headHouse')">
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否租户" prop="HouseholdOrTenant">
                <el-switch v-model="formData.isTenant" active-text="是" inactive-text="否" :active-value="1"
                  @change="userInfoChange('tenant')" :inactive-value="0">
                </el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否重点管控人员" prop="isKeyManager">
                <!-- <el-input v-model="formData.isKeyManager"></el-input> -->
                <el-switch v-model="formData.isKeyManager" active-text="是" inactive-text="否" :active-value="1"
                  :inactive-value="0">
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-show="formData.isKeyManager" label="管控类型"
                :prop="formData.isKeyManager ? 'manageType' : ''">
                <el-select v-model="formData.manageType" clearable size="small">
                  <!-- <el-option label="请选择字典生成" value="" /> -->
                  <el-option v-for="(item, indey) of [
                    { value: '孤寡老人' },
                    { value: '社区矫正对象' },
                    { value: '文艺活动服务人员有才艺的人' },
                    { value: '慢性症患者' },
                  ]" :key="indey" :label="item.value" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否党员" prop="isPartyMember">
                <!-- <el-input v-model="formData.isKeyManager"></el-input> -->
                <el-switch v-model="formData.isPartyMember" active-text="是" inactive-text="否" :active-value="1"
                  :inactive-value="0">
                </el-switch>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-divider><i class="el-icon-mobile-phone"></i> 房屋信息</el-divider>
        <div class="houseInfo">
          <div class="houseInfo-item" v-for="(HouseInfo, index) of shouHouseInfoStack" :key="index">
            <el-form-item class="houseInfo-form-item" :label="HouseInfo.desc"
              :prop="houseIdArr[index] ? '' : 'houseId'">
              <el-select v-if="HouseInfo.data.length" v-model="houseIdArr[index]" :placeholder="'请选择' + HouseInfo.desc"
                size="small">
                <!-- <el-option label="请选择字典生成" value="" /> -->
                <el-option v-for="(item, indey) of HouseInfo.data" :key="indey" :label="item.name"
                  @click.native="houseSelectChange(item, index)" :value="item.id" />
              </el-select>
            </el-form-item>
          </div>
        </div>
        <el-divider><i class="el-icon-mobile-phone"></i> 账号信息</el-divider>
        <div class="accountNumberInfo">
          <el-row>
            <el-col :span="12">
              <el-form-item label="登录名" prop="username">
                <el-input v-model="formData.username"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="登录密码" prop="password">
                <el-input v-model="formData.password" type="password" show-password></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属角色" prop="role">
                <el-input v-model="formData.role"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="账号状态" prop="userState">
                <el-select v-model="formData.userState" clearable size="small">
                  <!-- <el-option label="请选择字典生成" value="" /> -->
                  <el-option v-for="(item, indey) of userStateList" :key="indey" :label="item.label"
                    :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitDialog">确 定</el-button>
      </span>

      <!-- 文件上传 -->
    </el-dialog>
    <el-dialog title="上传" :visible.sync="showDialogUpload" width="696px" height="40%" :close-on-click-modal="false">
      <div class="dialog-note dialog-note-form">
        <div class="form">
          <div class="container-from">
            <!-- 
              :headers="uploadToken"
            -->
            <el-row>
              <el-col :span="12">
                <el-upload class="upload-demo" action="/api/lh-community-web/person/manage/upload" :limit="5"
                  :file-list="fileList" :on-success="onUploadSuccess" :before-upload="onBeforeUpload"
                  :on-error="onUploadError" :show-file-list="true">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">
                    只能上传xls/xlsx文件，且不超过10M
                  </div>
                </el-upload>
              </el-col>
              <el-col :span="12">
                <el-button size="small" type="success" @click="templateDownload">下载模板</el-button>
              </el-col>
            </el-row>
            <!-- <el-progress
              v-if="progressFlag"
              :percentage="progressUpload"
            ></el-progress> -->
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import McButton from "@/basePackage/McButton";
import McTable from "@/basePackage/McTable";
import McForm from "@/basePackage/McForm";
import McPager from "@/basePackage/McPager";

import { debounce } from "../../common/utils";

import {
  getPersonList,
  deletePersonByPersonId,
  getPersonInfoByPersonId,
  addOrUpdatePersonInfo,
  getHouseSelectInfo,
} from "../../api/home";
export default {
  data() {
    return {
      // 查询相关
      queryFormData: {
        name: null,
        building: null,
        communityName: null,
        pageNum: 1,
        pageSize: 20,
      },
      total: 0,
      // "delete"
      quickButtons: ["export", "import"],
      fileList: [],
      tableLabels: [
        {
          label: "序号",
          slotName: "index",
        },
        {
          label: "住户姓名",
          prop: "name",
          type: "string",
        },
        {
          label: "手机号",
          prop: "telephone",
          type: "string",
        },
        {
          label: "所在小区",
          prop: "communityName",
          type: "string",
        },
        {
          label: "楼幢",
          prop: "building",
          type: "string",
        },
        {
          label: "操作",
          prop: "op",
          slotName: "handle",
        },
      ],
      //假数据请务必设置唯一id
      tableData: [],
      // 房屋下拉框数据
      houseSelectInfo: [],
      shouHouseInfoStack: [],
      showDialogUpload: false,
      /**分页 */
      pager: true,
      page: {
        "current-page": 1,
        "page-size": 20,
        "page-sizes": [20, 50, 100],
        total: 0,
        background: true,
      },
      tableSettings: {
        attrs: {
          loading: false,
          selectable: false,
        },
      },
      houseIdArr: [],
      formData: {},
      userStateList: [
        {
          value: 0,
          label: "正常",
        },
        // {
        //   value: 1,
        //   label: "删除",
        // },
        // {
        //   value: 2,
        //   label: "锁定",
        // },
        // {
        //   value: 3,
        //   label: "当日冻结",
        // },
      ],
      formRules: {
        /* 住户信息 */
        name: [
          {
            message: "请输入用户姓名",
            required: true,
            trigger: "blur",
          },
        ],
        idCard: [
          {
            message: "请输入身份证",
            required: true,
            trigger: "blur",
          },
        ],
        sex: [
          {
            message: "请选择性别",
            required: true,
            trigger: ["change", "blur"],
          },
        ],
        houseId: [
          {
            message: "请选择房屋信息",
            required: true,
            trigger: "blur",
          },
        ],
        telephone: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            required: true,
            trigger: "blur",
          },
        ],
        manageType: [
          {
            message: "请选择管控类型",
            required: true,
            trigger: ["change", "blur"],
          },
        ],
        // community: [
        //   {
        //     message: "请选择内容",
        //     required: true,
        //     trigger: "blur"
        //   },
        // ],
        /* 账号信息 */
        // username: [
        //   {
        //     message: "请输入登录名",
        //     required: true,
        //     trigger: "blur",
        //   },
        // ],
        // HouseholdOrTenant: [
        //   {
        //     message: "户主或者租户必须选择其中一个",
        //     required: true,
        //     trigger: "blur",
        //   },
        // ],
        // userState: [
        //   {
        //     message: "请选择账号状态",
        //     required: true,
        //     trigger: "blur",
        //   },
        // ],
      },
      showDialog: false,
      dialogTitle: "",

      formSettings: {
        attrs: {},
        itemAttrs: {
          "label-width": "50px",
        },
      },
      row: {},
      eventStatus: "",
    };
  },

  components: {
    McButton,
    McTable,
    McForm,
    McPager,
  },

  computed: {
    // 实时查询防抖 
    debounceHandleSearch() {
      return debounce(this.handleQuery, 700);
    },
    customButtons() {
      return [
        {
          label: "新增",
          value: "add",
          type: "primary",
          icon: "el-icon-plus",
          disabled: !this.houseSelectInfo.length,
        },
      ];
    },
  },
  watch: {
    "formData.age"(newValue, oldValue) {
      if (newValue < 0) {
        this.$set(this.formData, "age", 0);
      }
    },
    // 消除表单 select 报错提示
    houseIdArr: {
      handler() {
        this.resetFormValidate("form");
      },
      deep: true,
    },
  },

  mounted() {
    this.pageInit();
  },

  methods: {
    // 查询
    handleQuery() {
      this.queryFormData.pageNum = 1;
      this.getPersonList();
    },
    // 重置查询表单
    resetQuery() {
      this.queryFormData = {
        name: null,
        building: null,
        communityName: null,
        pageNum: 1,
        pageSize: 20,
      };
      this.$refs.queryForm.resetFields();
    },
    houseSelectChange(info, index) {
      if (this.formData["houseId"]) {
        this.$set(this.formData, "houseId", null);
      }
      // 选择前面的选择框, 做出判断
      if (index + 1 < this.shouHouseInfoStack.length) {
        this.shouHouseInfoStack = this.shouHouseInfoStack.slice(0, index + 1);
        this.houseIdArr = this.houseIdArr.slice(0, index + 1);
        let len = this.shouHouseInfoStack.length - 1;
        // 对当前选中的,进行选中操作 
        if (this.shouHouseInfoStack[len].data[0].children.length) {
          this.shouHouseInfoStack.push({
            desc: info.children[0].desc,
            data: info.children,
          });
        }
        return;
      }
      // 如果到了边界的时候,不在往shouHouseInfoStack里面添加数据
      if (!info.children.length) {
        // console.log(info, 656)
        this.$set(this.formData, "houseId", info.id);
        return;
      }
      // 导入选择框数据
      this.shouHouseInfoStack.push({
        desc: info.children[0].desc,
        data: info.children,
      });
    },
    pageInit() {
      this.getPersonList();
      this.getHouseSelectInfo();
      this.calcTableHeight();
    },

    getPersonList() {
      // 获取用户列表
      getPersonList(this.queryFormData).then((res) => {
        // console.log(res)
        this.tableData = res.records;
        // 给我的tableData 加上一个索引, 方便进行序号展示
        this.page.total = Number(res.total);
        this.page["current-page"] = res.current;
        this.ableDataAddIndex();
      });
    },
    ableDataAddIndex() {
      for (let i = 1; i <= this.tableData.length; i++) {
        this.tableData[i - 1].index = i;
      }
    },
    getHouseSelectInfo() {
      getHouseSelectInfo().then((res) => {
        const { data: houseSelectInfo } = res;
        if (res.code == 200) {
          this.houseSelectInfo = houseSelectInfo;
          this.shouHouseInfoStack.push({
            desc: "社区名",
            data: houseSelectInfo,
          });
        } else {
          this.$message.error(res.message);
        }
      });
    },
    resetFormValidate(formName) {
      setTimeout(() => {
        this.$refs[formName] && this.$refs[formName].clearValidate();
      }, 0);
    },
    initAddFrom() {
      this.formData = {};
      // 级联下拉选择数据
      this.houseIdArr = [];
      this.shouHouseInfoStack = [];
      // 表单初始值设置
      this.$set(this.formData, "isHeadHousehold", 1);
      this.$set(this.formData, "isPartyMember", 0);
      this.$set(this.formData, "isTenant", 0);
      this.$set(this.formData, "isKeyManager", 0);
      // 获取房屋列表数据
      this.getHouseSelectInfo();
      // 重置表单form 表单校
      this.resetFormValidate("form");
    },
    //按钮回调
    buttonsEvent(val) {
      this.eventStatus = val.value;
      switch (val.value) {
        case "add":
          {
            this.dialogTitle = "新增";
            // 表单数据初始化
            this.initAddFrom()
            this.showDialog = true;
          }
          break;
        case "edit":
          {
            this.dialogTitle = "修改";
            this.showDialog = true;
            // this.$refs.form.resetFields();
          }
          break;
        case "delete":
          {
            this.$confirm("是否确定删除此条数据?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }).then(() => {
              this.$message.success("删除成功！");
              // this.tableSettings.attrs.loading = true;
            });
          }
          break;
        case "export":
          {
            window.open("/api/lh-community-web/person/manage/export");
          }
          break;
        case "import":
          {
            // this.progressFlag = false;
            this.fileList = [];
            this.showDialogUpload = true;
          }
          break;
      }
    },
    templateDownload() {
      window.open("/api/lh-community-web/person/manage/download/example");
    },
    /**获取表格数据 */
    getTableData(val) {
      this.queryFormData.pageNum = val;
      this.getPersonList();
    },
    sizeChange(val) {
      //val返回条目数
      this.page["page-size"] = val;
      this.queryFormData.pageSize = val;
      this.getPersonList();
    },
    removeHandle(info) {
      this.$confirm("是否确定删除此条数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deletePersonByPersonId(info.id).then((res) => {
          if (res.code == 200) {
            this.getPersonList();
            this.$message.success("删除成功！");
          } else {
            this.$message.error(res.message);
          }
        });
      });
    },
    editHandle(info) {
      this.eventStatus = "edit";
      getPersonInfoByPersonId(info.id).then((res) => {
        if (res.code == 200) {
          // 处理许可证过期
          if (res.data.code == "9999") {
            this.$message.error(res.data.message);
            return;
          }
          this.initFormData(res.data);
          this.showDialog = true;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    initFormData(info) {
      // 出现 License不存在或已经失效，请上传License文件！

      const baseinfoArr = [
        "name",
        "age",
        "telephone",
        "idCard",
        "sex",
        "hjPlace",
        "type",
        "degree",
        "workPlace",
        "isKeyManager",
        "manageType",
        "isHeadHousehold",
        "isTenant",
        "isPartyMember",
      ];
      const accountinfoArr = ["username"];

      // 初始化房屋select信息
      // this.houseEditInfo = info.houseinfo;
      this.parseHouseinfoToSelectData(info.houseinfo);

      // 挂载 formData 的数据
      if (info.baseinfo) {
        this.moutedFormData(baseinfoArr, info.baseinfo);
      }

      if (info.accountinfo && info.accountinfo.user) {
        this.moutedFormData(accountinfoArr, info.accountinfo.user);
      } else {
        this.$set(this.formData, "username", "");
      }
      // this.formData.role = "管理员"; // 还需要其它的优化
      this.formData.userState = 0; // 表示正常
      // this.$set(this.formData, "password", "adminadminxjh");
      this.$set(this.formData, "personId", info.baseinfo.id);
      if (info.houseinfo) {
        this.$set(this.formData, "houseId", info.baseinfo.houseId);
      }
    },
    // 挂载 formdata 的数据
    moutedFormData(arr, data) {
      for (let item of arr) {
        this.$set(this.formData, item, data[item]);
      }
    },
    parseHouseinfoToSelectData(info) {
      if (!info) {
        // 如果数据获取失败,应该把select初始值赋一下
        this.shouHouseInfoStack = [
          {
            // 用来作为外面的循环使用
            data: this.houseSelectInfo,
            desc: "社区名",
          },
        ];
        this.houseIdArr = [];
        this.$message.error("获取详情数据数据失败");
        // throws.error("获取详情数据数据失败")
        return;
      }
      this.shouHouseInfoStack = [
        {
          // 用来作为外面的循环使用
          data: this.houseSelectInfo,
          desc: "社区名",
        },
      ];
      this.houseIdArr = [];
      // 根据后端 返回回来的代码, 进行一个
      let selectLevel = ["communityName", "region", "building", "unit"];
      for (let item of selectLevel) {
        if (!info[item]) continue;
        let len = this.shouHouseInfoStack.length;
        for (let houseData of this.shouHouseInfoStack[len - 1].data) {
          if (houseData.children.length == 0) continue;
          if (houseData.name == info[item]) {
            this.shouHouseInfoStack.push({
              data: houseData.children,
              id: houseData.id,
              desc: houseData.children[0].desc,
            });
            this.houseIdArr.push(houseData.id);
          }
        }
      }
      // 因为上面的判断有一个chilren的判断 最后需要对最后一个进行单独处理
      let len = this.shouHouseInfoStack.length;
      for (let houseData of this.shouHouseInfoStack[len - 1].data) {
        if (houseData.name == info["houseNumber"]) {
          this.houseIdArr.push(houseData.id);
        }
      }
      // this.shouHouseInfoStack[
      //   this.shouHouseInfoStack.length - 1
      // ].data[0].id;
      // this.houseIdArr.push(lastHouseId);
    },
    onUploadSuccess(response, file, fileList) {
      this.progressUpload = 100;
      clearInterval(this.timer);
      if (response.code === 100) {
        this.fileList = [];
        this.onLoadList();
        this.$message.success("上传成功");
        this.showDialogUpload = false;
      }
    },
    onUploadError(err, file, fileList) {
      this.$message.error("上传失败");
    },
    onBeforeUpload(file) {
      let excelist = ["xls", "xlsx"];
      let flieArr = file.name.split(".");
      let fileSuffix = flieArr[flieArr.length - 1];
      let result = excelist.some(function (item) {
        return item == fileSuffix;
      });
      let flag = file.size < 1024 * 1024 * 10 && result;
      if (!flag) {
        this.$message.error("只能上传xls/xlsx文件，且不超过10M");
      } else {
        // this.progressFlag = true;
        this.progressUpload = 0;
        this.timer = setInterval(() => {
          if (this.progressUpload < 98) {
            this.progressUpload++;
          }
        }, 200);
      }

      return flag;
    },
    getCookie(name) {
      var strcookie = document.cookie;
      var arrcookie = strcookie.split("; ");
      for (var i = 0; i < arrcookie.length; i++) {
        var arr = arrcookie[i].split("=");
        if (arr[0] === name) {
          return arr[1];
        }
      }
      return "";
    },

    //提交表单
    submitDialog() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let msg = "";
          if (this.eventStatus == "add") {
            msg = "新增成功";
          } else {
            msg = "修改成功";
          }
          // 如果我的密码没有修改,就传入一个空的密码
          if (this.formData.password == "adminadminxjh") {
            this.formData.password = "";
          }
          addOrUpdatePersonInfo(this.formData).then((res) => {
            if (res.code == 200) {
              this.$message.success(msg);
              this.showDialog = false;
              this.getPersonList();
            } else {
              this.$message.error(res.message);
            }
          });
        }
      });
    },
    //获取当前选中行
    currentChange(row) {
      this.row = row;
      this.$refs.mcButton.changeButtonState(
        ["edit", "delete"],
        "disabled",
        false
      );
    },

    /**计算表格高度 */
    calcTableHeight() {
      let vm = this;
      vm.$nextTick(() => {
        let pagerHeight = 0;
        if (vm.$refs.McPager && vm.$refs.McPager.$el.offsetHeight) {
          pagerHeight = vm.$refs.McPager.$el.offsetHeight;
        }
        this.$refs.McTable.setTableAttr(
          "height",
          vm.$refs.demo.offsetHeight - pagerHeight - 100
        );
      });
    },

    // 是否户主和是否租户的判断
    userInfoChange(info) {
      if (info == "headHouse") {
        if (this.formData.isHeadHousehold == 1 && this.formData.isTenant == 1) {
          this.formData.isTenant = 0;
        }
      } else {
        if (this.formData.isHeadHousehold == 1 && this.formData.isTenant == 1) {
          this.formData.isHeadHousehold = 0;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.demo-page {
  width: 100%;
  height: 100%;
}

.houseInfo {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-right: 50px;

  .houseInfo-item {
    width: 48%;
  }
}
</style>
